<template>
  <div class="exam-list">
    <!-- 筛选 -->
    <div class="exam-filter">
      <el-form :inline="true" label-position="right" label-width="80px" size="small" :model="query">
        <el-row>
          <el-col :span="6">
            <el-form-item label="考试名称">
              <el-input
                v-model="query.exam_name"
                placeholder="请输入考试名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学科名称">
              <el-select
                v-model="query.subject_id"
                placeholder="归属学科"
                clearable
                @change="changeSubject"
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学科名称">
              <el-select
                v-model="query.directory_id"
                placeholder="归属目录"
                clearable
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷状态">
              <el-select
                v-model="query.exam_type"
                placeholder="请选择试卷状态"
                clearable
              >
                <el-option label="阶段考试" :value="1" />
                <el-option label="综合考试" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="锁屏方式">
              <el-select
                v-model="query.lock_screen"
                placeholder="请选择"
                clearable
              >
                <el-option label="不锁屏" :value="1" />
                <el-option label="锁屏" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input
                v-model="query.create_name"
                placeholder="请输入创建人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="query.create_time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                align="right"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3" :offset="3">
            <el-button type="primary" plain size="small" @click="searchsubmit">搜索</el-button>
            <el-button size="small" @click="searchcancel">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 表格 -->
    <div class="table-bg">
      <el-table border :data="examList" :header-cell-style="{background:'#fafafa'}">
        <el-table-column align="center" type="index" prop="paper_name" width="60px" label="序号" />
        <el-table-column align="center" label="考试信息">
          <template slot-scope="scope" class="">
            <el-row type="flex" align="star" style="line-height:30px">
              <span>考试ID:{{ scope.row.id }}</span>
              <span>考试名称:<span style="color:#409eff">{{ scope.row.exam_name }}</span></span>
              <span>归属学科:{{ scope.row.subject_name }}</span>
              <span>归属目录:{{ scope.row.directory_name }}</span>
            </el-row>
            <el-row type="flex" align="star" style="line-height:30px">
              <span>考试类型:{{ scope.row.exam_type===2?'综合考试':'阶段考试' }}</span>
              <span>考试方式:{{ scope.row.lock_screen===1?'不锁屏':'锁屏' }}</span>
              <span>创建人:{{ scope.row.create_name }}</span>
              <span>创建时间:{{ scope.row.create_time|formatTime }}</span>
              <span>试卷信息: <el-tag style="color:#409eff; cursor: pointer;" type="primary" plain size="mini" @click="eaxmMesage(scope.row)">点击查看</el-tag></span>
              <span>推送班级信息:
                <span v-if="scope.row.exam_bind_class.length===0">暂无</span>
                <span v-else> <el-tag style="color:#409eff; cursor: pointer;" type="primary" plain size="mini" @click="classMessage(scope.row)">点击查看</el-tag></span>
              </span>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="140px">
          <template slot-scope="scope">
            <el-button type="warning" icon="el-icon-paperclip" circle size="mini" />
            <el-button
              v-if="scope.row.exam_bind_class.length===0"
              type="danger"
              icon="el-icon-delete"
              circle
              size="mini"
              @click="delExam(scope.row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <el-row type="flex" justify="end" align="middle" style="height: 60px">
      <!-- <span>共 6 条</span> -->
      <el-pagination
        background=""
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        :current-page="page"
        :page-size="limit"
        :page-sizes="[2,4,6,8]"
        @current-change="changePage"
        @size-change="changeSize"
      />
    </el-row>
    <!---------------------试卷信息弹框-------------------------->
    <el-dialog :visible.sync="isShowExam" width="30%">
      <template slot="title" class="header-title">
        <span>考试试卷信息</span>
      </template>
      <template>主考试卷：<span style="color:#409eff">{{ examMessage }}</span></template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowExam=false">取 消</el-button>
        <el-button type="primary" @click="isShowExam=false">确 定</el-button>
      </span>
    </el-dialog>
    <!---------------------试推送班级弹框-------------------------->
    <el-dialog title="已推送信息" :visible.sync="isShowClass" width="60%">
      <el-table border="" :data="tableData" style="width: 100%">
        <el-table-column prop="class_name" label="班级名称" width="180" />
        <el-table-column label="考试状态">
          <template slot-scope="scope">
            <span style="color:#409eff">主考：</span>
            <span v-if="scope.row.exam_time_start">待考试 | {{ scope.row.exam_time_start|formatTime }}</span>
            <span v-else>待定时间</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <el-button type="text">解除绑定</el-button>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowClass=false">取 消</el-button>
        <el-button type="primary" @click="isShowClass=false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getExamList, deleteExam } from '@/api/exam'
const defaultItem = {
  exam_name: '',
  subject_id: '',
  directory_id: '',
  exam_type: '',
  lock_screen: '',
  create_name: '',
  create_time: []
}
export default {
  name: 'Exam',
  data() {
    return {
      query: { ...defaultItem },
      examList: [],
      treeList: [],
      page: 1, // 当前页码
      limit: 2,
      total: 0, // 总数
      isShowClass: false,
      isShowExam: false,
      examMessage: '',
      tableData: []
    }
  },
  computed: {
    directoryList() { // 目录信息
      if (!this.query.subject_id) {
        return []
      } else {
        const result = this.treeList.find(val => val.id === this.query.subject_id)
        // console.log(result.children)
        return result.children
      }
    }
  },
  created() {
    this.getExamList()
    !this.treeList.length && this.getTreeList()
  },
  methods: {
    async getExamList() {
      const { query, page, limit } = this
      const { data } = await getExamList({ ...query, page, limit })
      this.examList = data.list
      this.total = data.total
    },
    changePage(val) {
      this.page = val
      this.getExamList()
    },
    changeSize(val) {
      this.limit = val
      this.getExamList()
    },
    // 树形列表
    async getTreeList() {
      try {
        this.treeList = await this.$store.dispatch('paper/getTreeList')
      } catch (error) {
        console.log(error)
      }
    },
    searchsubmit() {
      this.getExamList()
      this.$message.success('搜索成功')
    },
    searchcancel() {
      this.query = {}
      this.getExamList()
    },
    // 删除功能
    async delExam(id) {
      try {
        await this.$confirm('是否确定删除？')
        await deleteExam(id)
        this.$message.success('删除试卷成功')
        if (this.examList.length === 1 && this.page !== 1) {
          this.page--
        }
        // 更新视图
        this.getExamList()
      } catch (error) {
        console.log(error)
      }
    },
    // 点击查看试卷信息
    eaxmMesage(row) {
      this.isShowExam = true
      this.examMessage = row.main_paper_name
    },
    classMessage(row) {
      this.isShowClass = true
      // console.log(row)
      this.tableData = row.exam_bind_class
    },
    changeSubject() {
      this.query.directory_id = ''
    }
  }
}
</script>

<style scoped lang='scss'>
.exam-filter{
  background-color: #fff;
  padding: 16px;
}
.el-date-editor--daterange{
  width: 200px;
}
.table-bg{
  span{
    margin-right: 20px;
    color: #333;
  }
}
::v-deep .el-dialog__header{
 border-bottom: 1px solid #e9ecef!important
}
</style>
